<template>
    <!-- 导航部分开始 -->
    <!--    <el-row style="margin-top: 10px;">-->
    <!--        <el-col :span="24">-->
    <!--            <el-breadcrumb separator="/">-->
    <!--                <el-breadcrumb-item>首页</el-breadcrumb-item>-->
    <!--                <el-breadcrumb-item>工艺管理</el-breadcrumb-item>-->
    <!--            </el-breadcrumb>-->
    <!--        </el-col>-->
    <!--    </el-row>-->
    <!-- 导航部分结束 -->
    <!-- 搜索栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <!-- model 绑定表单数据 -->
            <el-form :inline="true" :model="queryTechnique" class="demo-form-inline">
                <el-form-item label="工艺路线编码">
                    <el-input v-model="queryTechnique.techniqueCode" placeholder="工艺路线编码"/>
                </el-form-item>
                <el-form-item label="工艺路线名称">
                    <el-input v-model="queryTechnique.techniqueName" placeholder="工艺路线名称"/>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-select
                        style="width: 100px"
                        v-model="queryTechnique.techniqueStatus"
                        placeholder="是否启用"
                    >
                        <el-option value="0" :selected="true" label="全部"/>
                        <el-option value="1" label="是"/>
                        <el-option value="2" label="否"/>
                        <el-option value="99" label="删除"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadTechnique">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
    <!-- 搜索栏部分结束 -->

    <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-tooltip
                class="box-item"
                effect="dark"
                content="新增工艺路线"
                placement="top-start"
            >
                <el-button @click="toAddTechnique" type="primary">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-button>
            </el-tooltip>
            <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-button>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                           @confirm="deleteBtnHandler" title="您确定要删除选中的工艺路线信息吗？">
                <template #reference>
                    <el-button :disabled="deleteBtnDisabled" type="primary">
                        <el-icon>
                            <Minus/>
                        </el-icon>
                    </el-button>
                </template>
            </el-popconfirm>
            <!--            <el-button type="primary">-->
            <!--                <el-icon>-->
            <!--                    <Upload/>-->
            <!--                </el-icon>-->
            <!--            </el-button>-->
            <!--            <el-button type="primary">-->
            <!--                <el-icon>-->
            <!--                    <Download/>-->
            <!--                </el-icon>-->
            <!--            </el-button>-->
        </el-col>
    </el-row>
    <!-- 工具栏部分结束 -->
    <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="techniqueTable" @selection-change="handleSelectionChange" :data="techniques" border :stripe="true"
                      style="width: 95%">
                <el-table-column type="selection" width="55"/>
                <el-table-column prop="techniqueCode" label="工艺路线编码">
                    <template #default="scope">
                        <el-link @click="showTechniqueItem(scope.row.techniqueId)" type="primary">
                            {{scope.row.techniqueCode}}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="techniqueName" label="工艺路线名称"/>
                <el-table-column prop="description" label="工艺路线说明"/>
                <el-table-column prop="techniqueStatus" label="是否启用">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.techniqueStatus == 1">是</el-tag>
                        <el-tag type="warning" v-else-if="scope.row.techniqueStatus == 2">否</el-tag>
                        <el-tag type="danger" v-else>删除</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="notes" label="备注"/>

                <!-- 行工具栏 -->
                <el-table-column width="140" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="toEditTechnique(scope.row.techniqueId)" size="small">修改</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteTechnique(scope.row.techniqueId)" title="您确定要删除这个工艺路线信息吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
    <!-- 列表部分结束 -->
    <!-- 分页部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-pagination background @change="pageChange" layout="prev, pager, next" v-bind:page-size="limit"
                           :total="total"/>
        </el-col>
    </el-row>
    <!-- 分页部分结束 -->

    <!-- 使用子组件 -->
    <TechniqueAddWin :visible="addTechniqueVisible" @optionCompleted="addOptionCompleted"/>
    <TechniqueEditWin :visible="editTechniqueVisible" :techniqueId="editTechniqueId" @optionCompleted="editOptionCompleted"/>
    <TechniqueItem :visible="techniqueItemVisible" :techniqueId="editTechniqueId" @optionCompleted="techniqueItemOptionCompleted"/>
</template>

<script>
import TechniqueAddWin from './craft-add-win.vue';
import TechniqueEditWin from './craft-edit-win.vue';
import TechniqueItem from './craft-item.vue'
// import StepItem from "@/views/pro/technique/step/step-item.vue";
// import DictItem from './dict-item.vue';
// 引入api
import techniqueRequest from '../../../api/technique.js';
import technique from "@/api/technique.js";
import Technique from "../../../api/technique.js";

export default {
    components: {
        TechniqueItem,
        TechniqueAddWin,
        TechniqueEditWin,
    },
    name: "technique.vue",
    data() {
        return {
            queryTechnique: {},// 绑定查询条件
            createTimes: [],// 绑定搜索栏中的时间范围
            techniques: [],// 列表数据
            currentPage: 1,// 当前页码
            limit: 10,// 每页大小
            total: 0,// 总条数
            addTechniqueVisible: false,// 新增工艺的弹窗是否显示

            editTechniqueVisible: false,// 标记是否显示编辑工艺的弹窗
            editTechniqueId: -1,// 编辑工艺的id

            techniqueItemVisible: false,// 标记是否显示工艺项的弹窗
            currentTechniqueCode: undefined,// 当前工艺的type

            editBtnDisabled: true,
            deleteBtnDisabled: true
        }
    }, methods: {
        /**
         * 工具栏删除按钮事件
         */
        deleteBtnHandler() {
            let selectionRows = this.$refs.techniqueTable.getSelectionRows();
            let techniqueIds = new Array();
            selectionRows.forEach(row => {
                techniqueIds.push(row.techniqueId);
            })
            techniqueRequest.deleteTechniques(techniqueIds,res =>{
                this.$message({
                    type: 'success',
                    message: '删除工艺路线成功!'
                });
                this.loadTechnique();
            });
        },
        /**
         * 行删除按钮事件
         * @param techniqueId
         */
        deleteTechnique(techniqueId) {
            techniqueRequest.deleteTechnique(techniqueId, res => {
                this.$message({
                    type: 'success',
                    message: '删除工艺路线成功!'
                });
                this.loadTechnique();
            });
        },
        /**
         * 工具栏编辑按钮事件
         */
        editBtnHandler() {
            let editTechnique = this.$refs.techniqueTable.getSelectionRows()[0];
            if (editTechnique != undefined) {
                this.editTechniqueId = editTechnique.techniqueId;
                this.editTechniqueVisible = true;
            } else {
                this.$message({
                    type: 'warning',
                    message: '请选择要编辑的工艺路线!'
                });
            }
        },
        /**
         * 表格中数据选择事件
         */
        handleSelectionChange() {
            let selectionRows = this.$refs.techniqueTable.getSelectionRows();
            if (selectionRows.length == 0) {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = true;
            } else if (selectionRows.length == 1) {
                this.editBtnDisabled = false;
                this.deleteBtnDisabled = false;
            } else {
                this.editBtnDisabled = true;
                this.deleteBtnDisabled = false;
            }
        },
        /**
         * 工艺列表中的超链接事件
         * @param techniqueId
         */
        showTechniqueItem(techniqueId) {
            this.editTechniqueId = techniqueId;
            console.log(techniqueId)
            // 弹窗
            this.techniqueItemVisible = true;
        },
        /**
         * 监听子组件工艺项弹窗的操作是否完成
         */
        techniqueItemOptionCompleted() {
            // this.currentTechniqueCode = -1;
            this.techniqueItemVisible = false;
            this.loadTechnique();
        },
        /**
         * 监听编辑工艺的子组件操作完成的事件
         */
        editOptionCompleted() {
            // 将弹窗设置为false
            this.editTechniqueVisible = false;
            // 重新加载列表
            this.loadTechnique();
        },
        /**
         * 行编辑按钮事件
         */
        toEditTechnique(techniqueId) {
            // 将传入的dictId设置到editDictId
            this.editTechniqueId = techniqueId;
            // 弹出编辑窗体
            this.editTechniqueVisible = true;
        },
        /**
         * 工具栏的新增工艺按钮事件
         */
        toAddTechnique() {
            // 弹窗 addTechniqueVisible设置为true
            this.addTechniqueVisible = true;
        },
        /**
         * 监听添加工艺的子组件操作完成的事件
         */
        addOptionCompleted() {
            // 将弹窗设置为false
            this.addTechniqueVisible = false;
            // 重新加载列表
            this.loadTechnique();
        },
        /**
         * 翻页的事件
         * @Param currentPage 最新的页码
         */
        pageChange(currentPage, pageSize) {
            // 将最新的页码赋值给this.currentPage
            this.currentPage = currentPage;
            // 重新加载数据
            this.loadTechnique();
        },
        /**
         * 加载工艺信息
         */
        loadTechnique() {
            // 设置其他的条件
            this.queryTechnique.page = this.currentPage;
            this.queryTechnique.limit = this.limit;
            techniqueRequest.loadTechnique(this.queryTechnique, res => {
                this.techniques = res.data.data;
                this.total = res.data.total;
            })
        }
    }, mounted() {
        this.loadTechnique();
    }
}
</script>

<style scoped>

</style>